<template>
  <textarea placeholder="請輸入漢字" type="area" class="orgInput" v-model="textToConvert"></textarea>
  <div class="convert_wrapper">
    <div>說明：簡化字無法轉換注音</div>
    <div>
      <a class="copy_button" @click="onCopyResultBtnClicked">拷貝結果</a>
      <select class="yin_select" v-model="convertType">
        <option value="0">拼音</option>
        <option value="1">注音</option>
      </select>
    <a class="convert_button" @click="onConvertBtnClicked">轉換</a>
    </div>
  </div>
  <div class="result_wrapper">
    <template v-for="(item,index) in result" :key="index">
      <div v-if="item.word != '\n'"
        :class="['result_item',{'result_item-none': !item.yin || item.useSelect}, {'result_item-more': item.yin && item.yin.length > 1}]"
      >
        <div class="yin" @click="onChooseYinBtnClicked(item)">{{ item.yin && item.yin[item.yinIndex] }}
          <div class="yin_more" v-if="item.yin && item.yin.length > 1">
            <div 
              class="yin_more_item" 
              v-for="(yin,yin_index) in item.yin" 
              :key="`yin_index${yin_index}`"
              @click="item.yinIndex = yin_index"
              >
              {{ yin }}
            </div>
          </div>
        </div>
        <div class="word">{{ item.word }}</div>
      </div>
      <br v-else>
    </template>
    <br><br><br><br><br><br><br>
  </div>

  <div class="yin_choose_wrapper" v-if="showChooseModel" @click="showChooseModel = false">
    <div class="core" @click.stop="">
      <div class="tab_wrapper">
        <yinChooseVue @choose="onChooseYin" :type="Number(convertType)" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import useClipboard from 'vue-clipboard3'
import yinChooseVue from './components/yin_choose.vue'


const { toClipboard } = useClipboard()


import {handler, type LookforStringResultWord} from './js/handler'
handler.init();

const convertType = ref(0)
const textToConvert = ref('')
const result = ref<LookforStringResultWord[]>([]);
const showChooseModel = ref(false)

function onConvertBtnClicked() {
  const temp = textToConvert.value.replace(/\r/g, '');
  result.value = handler.lookforString(temp, Number(convertType.value));
  console.log('..convert', convertType, result)
}


function toast(msg: string, duration : number | undefined = undefined){
	duration= !duration ? 3000 : duration;
	var m = document.createElement('div');
	m.innerHTML = msg;
	m.style.cssText="width:150px; background:#000; opacity:0.5; height:40px; color:#fff; line-height:40px; text-align:center; border-radius:5px; position:fixed; top:100px; left:calc(50% - 75px); z-index:999999; font-weight:bold;";
    document.body.appendChild(m);
	setTimeout(function() {
		var d = 0.5;
        m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
        m.style.opacity = '0';
		setTimeout(function() { document.body.removeChild(m) }, d * 1000);
	}, duration);
}

async function onCopyResultBtnClicked() {
  try {
    let str = ''
    let yinline = '';
    let wordline = '';
    result.value.forEach((item) => {
      if (item.word == '\n') {
        str += yinline + '\n'
        str += wordline + '\n'
        yinline = ''
        wordline = ''
      }
      else {
        let yin = ' ';
        if (item.yin) yin = item.yin[item.yinIndex]
        yin += '\t'
       
        wordline += item.word + '\t'
        yinline += yin;
      }
    })
    str += yinline + '\n'
    str += wordline

    toClipboard(str)
    toast('已拷貝', 500)
  } catch(e) {
    toast('拷貝失敗')
  }
}

let chooseItem: LookforStringResultWord | null = null;
function onChooseYin(yin: string) {
  if (!chooseItem) return
  chooseItem.yin = [yin]
  chooseItem.yinIndex = 0;
  chooseItem.useSelect = true
  showChooseModel.value = false;
}

function onChooseYinBtnClicked(item: LookforStringResultWord) {
  chooseItem = item;
  if (item.yin && !item.useSelect) return
  showChooseModel.value = true;
}

</script>

<style lang="less">
html {
  padding: 0;
  margin: 0;
}
body {
  margin: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

#app {
  display: flex;
  flex-direction: column;
  
  .orgInput {
    height: 300px;
    padding: 8px;
    font-size: 16px;
    outline-color: #2b85e4;
  }

  .convert_wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    .yin_select {
      padding: 6px 20px;
      font-size: 18px;
      outline: none;
      margin-right: 20px;
    }

    .convert_button {
      cursor: pointer;
      padding: 5px 40px;
      font-size: 18px;
      border: 1px solid #333;
      background-color: #2b85e4;
      color: white;
      &:hover {
        background-color: rgba(#2b85e4,0.8);
      }
    }

    .copy_button {
      cursor: pointer;
      padding: 5px 20px;
      font-size: 18px;
      border: 1px solid #333;
      margin-right: 20px;
      &:hover {
        background-color: rgba(#2b85e4,0.8);
        color: white;
      }
    }
  }

  .result_wrapper {
    margin-top: 20px;
    .result_item{
      display: inline-block;
      text-align: left;
      padding: 4px 4px;

      &-more {
        color: #ff9900;
        font-weight: bold;
      }

      &-none {
        color: #ed4014;
        font-weight: bold;
      }
 
      .yin {
        cursor: pointer;
        position: relative;
        height: 20px;
        .yin_more {
          display: none;
          position: absolute;
          border: 1px solid #333;
          padding: 4px 8px;
          background-color: white;
          width: 80px;
          
          top: 20px;
          left: 0;

          .yin_more_item {
            padding: 4px 8px;
            text-align: left;
            &:hover {
              background-color: #333;
            }
          }
        }

        &:hover {
          z-index: 999;
          .yin_more {
            display: block;
          }
        }
      }
      .word {
        font-size: 20px;
        height: 30px;
      }
    }
  }

}


.yin_choose_wrapper {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  .core {
    background-color: white;
    margin-top: -80px;
    padding: 16px;
  }
}


</style>
